<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册页面</title>
	<!--	<link rel="stylesheet" type="text/css" href="css/sg_index.css" />报错：注意引入的外部css样式也需要放在jquery 和bootstrap之后-->
		<script src="bootstrap-3.3.5/js/jquery-3.1.1.js"></script>
		<script src="bootstrap-3.3.5/js/bootstrap.js"></script>		
		<link href="bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/register.css" />
		<link rel="stylesheet" type="text/css" href="css/sg_index.css" /><!--注意顺序很重要，必须先引用jquery.min.js文件，然后再引用botstrap的js-->
	</head>
	<nav class="top"><!--<nav>标签表示明确意义的导航组-->
			<span class="pull-left"><!--区别：<span>是内联元素，可以嵌套在同一行，<div>是块级元素，需要另起一行-->
				<span><span class="glyphicon glyphicon-fire redColor"></span> 喵，欢迎来时光购物城</span>
			</span>			
	</nav>	
<style>
body{
width: 100%;
   font-family: arial; 
   background-image: url(img/登录3.jpg);
}
</style>
<body>
	<div class="zc_page">
		<div class="register_form">
			<br><h3 style="text-align: center; font-weight: bold;">用户注册</h3><br>
			<form>
				<div class="user_mail">
					<label for="mail"><span class="glyphicon glyphicon-envelope"></span></label>
					<input type="text" id="mail" name="" placeholder="  请输入邮箱账号"/>
				</div>
				<div class="user_password">
					<label for="password"><span class="glyphicon glyphicon-lock"></span></label>
					<input type="password" id="password" name="" placeholder="  请输入密码"/>
				</div>
				<div class="user_password1">
					<label for="reatpassword"><span class="glyphicon glyphicon-lock"></span></label>
					<input type="password" id="reatpassword" name="" placeholder="  确认输入的密码"/>
				</div>
				<div class="user_phone">
					<label for="phone"><span class="glyphicon glyphicon-phone"></span></label>
					<input type="text" id="phone" name="" placeholder="  请输入手机号"/>
				</div>
			</form>
		</div>
		<div class="register_link">
		    &nbsp;<input type="checkbox" id="agree" name=""/>&nbsp;<label for="agree"> 点击表示您同意商城《服务协议》</label><a href="#"><span>登录</span></a>
		</div>
		<div class="register_button">
		     <input type="submit" name="" value="注册" onclick="regist()"  />
		</div>

    </div>





	<script>
		function regist(){
			var mail=document.getElementById("mail");
			var password=document.getElementById("password");
			var reatpassword=document.getElementById("reatpassword");
			var phone=document.getElementById("phone");
	/*	if(mail.value===" "&&mail.value==null){
			alert("邮箱不能为空！");
			return;
		}注意使用逻辑与&&和逻辑或||的区别*/
		if(mail.value==="" || mail.value===null){
			alert("邮箱不能为空！");
			return;
		}
        if(password.value==='' || password.value===null){
            alert("密码不能为空！");
            return;
        }
        if(reatpassword.value==='' || reatpassword.value===null){
            alert("确认密码不能为空！");
            return;
        }
        if(phone.value==='' || phone.value===null){
            alert("手机号码不能为空！");
            return;
        }	
		if(password.value!==reatpassword.value){
			alert("密码前后不一致，请重新输入！");
			return;
		}
		/*验证邮箱格式*/
		apos=mail.value.indexOf("@");
		dotpos=mail.value.lastIndexOf(".");
		if(apos<1||dotpos-apos<2){
			alert("请输入正确的邮箱格式！");
			return;
		}
		/*验证手机号数目*/
		if(isNaN(phone.value.length)){
			alert("手机号为数字！");
			return;
		}
		if(phone.value.length!==11){
			alert("手机号不为11位!");
			return;
		}
			alert("注册成功!");
}
	</script>
</body>
</html>
